<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="story" style="width: 600px;border: solid;">
        <h1 align=" center">我爱的故事</h1>
        <div align="center" style="background-color:gray">
            <input type="text" v-bind:value="poetry[0].value"><button id="show" type="button"
                @click="flag=!flag">{{flag?"关闭":"展开"}}</button>
        </div>
        <div v-show="flag" v-for=" s in poetry" :key="s.name">
            {{s.value}}
        </div>

    </div>

    <script>
        new Vue({
            el: "#story",
            data: {
                flag: false,
                poetry: [{ "name": "0", "value": "将进酒" },
                { "name": "1", "value": "君不见，黄河之水天上来，奔流到海不复回。" }, {
                    "name": "2"
                    , "value": "君不见，高堂明镜悲白发，朝如青丝暮成雪。"
                }, { "name": "3", "value": "人生得意须尽欢，莫使金樽空对月。" }, {
                    "name": "4"
                    , "value": " 天生我材必有用，千金散尽还复来。"
                }, { "name": "5", "value": "烹羊宰牛且为乐，会须一饮三百杯。" }, {
                    "name": "6", "value"
                        : "岑夫子，丹丘生，将进酒，杯莫停。"
                }, { "name": "7", "value": "与君歌一曲，请君为我倾耳听。" }, {
                    "name": "8", "value"
                        : "钟鼓馔玉不足贵，但愿长醉不复醒。"
                }, { "name": "9", "value": "古来圣贤皆寂寞，惟有饮者留其名。" }, {
                    "name": "10", "value"
                        : "陈王昔时宴平乐，斗酒十千恣欢谑。"
                }, { "name": "11", "value": "主人何为言少钱，径须沽取对君酌。" }, {
                    "name": "12", "value"
                        : "五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
                }]
            },
            methods: {

            }
        }) 
    </script>
</body>

</html>